new Vue({
    el: "#main",
    data: {
        // 控制页面大小及其右上角用户名
        user: {
            userName: "user",
            role: "游客"
        },
        main_style: "height: 1000px; border: 1px solid rgb(17, 18, 21)",
        dialogAddVisible: false, //新增数据表单是否可用
        dialogUpdateVisible: false, //修改数据表单是否可用
        dataList: [], //当前页要展示的列表数据
        addForm: {}, //新增表单数据
        updateForm: {}, //修改表单数据
        multipleSelection: [], // 复选框选中数据集合
        pagination: { //分页相关模型数据
            currentPage: 1, //当前页码
            pageSize: 10, //每页显示的记录数
            pageSizes: [10, 20, 30, 40, 50],
            total: 0, //总记录数
            type: "",
            name: "",
            description: ""
        }


    },
    methods: {
        autodivheight() {
            //获取浏览器窗口高度
            var winHeight = 0;
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            //通过深入Document内部对body进行检测，获取浏览器窗口高度
            if (document.documentElement && document.documentElement.clientHeight)
                winHeight = document.documentElement.clientHeight;
            //DIV高度为浏览器窗口的高度
            console.log(winHeight)
            setTimeout(() => {
                this.main_style = "height:" + winHeight + "px;" + " border: 1px solid rgb(17, 18, 21)"
            }, 1000)


            // document.getElementByClassName("main_test").style.height = winHeight + "px";
            console.log()
                //DIV高度为浏览器窗口高度的一半
                //document.getElementById("test").style.height= winHeight/2 +"px";
        },
        getUserRole(){
          //获取用户权限角色
          axios.get("/user/get/now").then(
              res=>{
                  if(res.data.code==='200'){
                      this.user.userName = res.data.data.name
                      this.user.role = res.data.data.role
                      this.getAll()
                  }else{
                      this.$message.error("请登录....")
                      window.setTimeout(()=>{
                          window.location.href="/index.html"
                      },1000)
                  }

              }
          )
        },
        logout(){
            axios.post("/user/logout").then(
                res=>{
                    if(res.data.code==='200'){
                        this.$message.success("登出成功")
                        window.setTimeout(()=>{
                            window.location.href="/index.html"
                        },1000)
                    }else{
                        this.$message.error("登出失败....")
                    }
                }
            )
        },
        getAll() {
            console.log(this.pagination)
            axios.get("/news/get/page", {
                params: {
                    name: this.pagination.name,
                    page: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize
                }
            }).then(
                res => {
                    // console.log(res.data)
                    this.dataList = res.data.data.records

                    this.pagination.total = res.data.data.total
                }
            )
        },
        // 复选框选中后执行的方法
        handleSelectionChange(val) {
            this.multipleSelection = val;

            console.log(this.multipleSelection)
        },
        handleRowClick(row, column, event) {
            this.$refs.handSelectTest_multipleTable.toggleRowSelection(row);
            console.log(row) //打印的是当前选中的行
        },
        deleteAll() {
            //批量删除
            var arr = []
                //遍历点击选择的对象集合，拿到每一个对象的id添加到新的集合中
            this.multipleSelection.forEach(row => arr.push(row.id))
                // console.log(arr)

            this.$confirm('确定删除吗', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                callback: action => {
                    arr.toString()
                    if (action === 'confirm') {
                        // 发送ajax请求，删除数据
                        axios.delete("/news/delete", { data: arr }).then(
                            res => {
                                if (res.data.code === '0' || '200') {
                                    //删除成功

                                    // 弹出消息提示
                                    this.$message.success("删除成功");

                                } else {
                                    this.$message.error("删除失败");
                                }
                                // 重新查询数据
                                this.getAll();
                            }
                        )

                    }
                }
            })

        },
        add() {
            // alert("进入增加")
            //添加用户
            axios.post("/news/insert", this.addForm).then(
                res => {
                    //关闭窗口
                    this.dialogAddVisible = false;
                    //新增列表重置
                    this.addForm = {}
                    if (res.data.code === '200') {
                        this.$message.success("添加成功")
                        this.getAll()
                    } else {
                        this.$message.error("添加失败")
                    }
                }
            )
        },
        update() {
            axios.put("/news/update", this.updateForm).then(
                res => {
                    this.dialogUpdateVisible = false
                        // console.log(res.data)
                    if (res.data.code === '200') {
                        this.$message.success("修改成功")
                        this.getAll()
                    } else {
                        this.message.error("修改失败")
                    }

                }
            )
        },
        handleUpdate(row) {
            //加载修改框
            this.dialogUpdateVisible = true
            this.updateForm = row
        },
        handleDelete(row) {
            axios.delete("/news/delete/" + row.id).then(
                res => {
                    this.getAll()
                    if (res.data.code === '200') {
                        this.$message.success("删除成功")
                    } else {
                        this.$message.error("删除失败")
                    }
                }
            )
        },
        handleSizeChange(val) {
            //console.log(`每页 ${val} 条`);
            this.pagination.pageSize = val;
            this.getAll();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pagination.currentPage = val;
            this.getAll();
        }

    },
    created() {
        // window.alert("欢迎光临")
        this.getUserRole()
    },
    mounted() {
        this.autodivheight();
    }
})